//后台配置/数据配置

import React, { Component } from "react";
import { connect } from "dva";
import {
    Card,
    Cascader,
    Button,
    Input,
    Icon,
    Divider,
    Table,
    InputNumber,
    Popconfirm,
    Form,
    Pagination,
    Checkbox,
    DatePicker,
    message
} from "antd";
import style from "./DataCon.less";
//引入字体图标组件
import MyIcon from "../../components/common/MyIcon";
import { bgConQuery } from "../../services/redmoe";
import request from "../../utils/request";
import PublicService from "../../services/PublicService";
import {
    findAll,
    findData,
    update,
    restoreDefaults,
    biaogeupdate
} from "../../services/redmoe";
import moment from "moment";
const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
    getInput = () => {
        if (this.props.inputType === "number") {
            return <InputNumber />;
        }
        return <Input />;
    };

    render() {
        const {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            ...restProps
        } = this.props;
        return (
            <EditableContext.Consumer>
                {form => {
                    const { getFieldDecorator } = form;
                    return (
                        <td {...restProps}>
                            {editing ? (
                                <FormItem style={{ margin: 0 }}>
                                    {getFieldDecorator(dataIndex, {
                                        rules: [
                                            {
                                                required: true,
                                                message: ` ${title}为必填项!`
                                            }
                                        ],
                                        initialValue: record[dataIndex]
                                    })(this.getInput())}
                                </FormItem>
                            ) : (
                                restProps.children
                            )}
                        </td>
                    );
                }}
            </EditableContext.Consumer>
        );
    }
}

class DataCon extends Component {
    state = {
        data: [],
        editingKey: "",
        disabled: true,
        textTime: "",
        defaultValue: null,
        textId: "",
        a:0,
        b:0,
        c:0,
        d:0,
        e:0,
        f:0,
        g:0,
        h:0,
        i:0,
        j:0,
        k:0,
        l:0,
        m:0,
        n:0,
        o:0,
        p:0,
        q:0,
        button:"编辑",
        disa:true
    };
    //进入页面事件
    componentDidMount() {
        //获取表的数据
        findAll().then(data => {
            console.log(data);
            if (data.data.rc == 0) {
              
                this.setState({
                    data: data.data.ret
                });
            }
        });

        //获取数字输入框中的值
        findData().then(data => {
          if(data.data.rc == 0) {
      
            const {a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q} = data.data.ret
            this.setState({
              a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,
              textId:data.data.ret.id
            })
          }
        })
    }

    constructor(props) {
        super(props);

        this.columns = [
            {
                title: "序号",
                dataIndex: "num",
                align: "center",
                width: 80,
                fixed: 'left'
            },
            {
                title: "PAHs",
                dataIndex: "contaminant",
                align: "center",
                fixed: 'left',
                width: 130
            },
            {
                title: "修复目标（mg/kg)",
                dataIndex: "targetControlValue",
                align: "center",
                editable: true,
                width: "5%"
            },
            {
                title: "MW（分子量）",
                dataIndex: "mw",
                align: "center",

                editable: true,
                width: "5%"
            },
            {
                title: "α",
                dataIndex: "alfa",
                align: "center",

                editable: true,
                width: "5%"
            },
            {
                title: "μ（偶极距）",
                dataIndex: "miu",
                align: "center",

                editable: true,
                width: "5%"
            },
            {
                title: "∆Ht",
                dataIndex: "ht",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "TE（分子总能量）",
                dataIndex: "te",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "EE",
                dataIndex: "ee",
                align: "center",
                width: "100px",
                editable: true
            },
            {
                title: "CCR",
                dataIndex: "ccr",
                align: "center",
                width: "100px",
                editable: true
            },
            {
                title: "EHOMO（最高占有轨道能量）",
                dataIndex: "ehomo",
                align: "center",
                width: "100px",
                editable: true,
                width: "5%"
            },
            {
                title: "ELUMO（次高占有轨道能量）",
                dataIndex: "elumo",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "qc-",
                dataIndex: "qc",
                align: "center",
                width: "5%",
                editable: true,
                width: "100px"
            },
            {
                title: "qH+",
                dataIndex: "qh",
                align: "center",
                width: "5%",
                editable: true,
                width: "100px"
            },
            {
                title: "CAA",
                dataIndex: "caa",
                align: "center",
                width: "5%",
                editable: true,
                width: "100px"
            },
            {
                title: "CMA",
                dataIndex: "cma",
                align: "center",
                width: "5%",
                editable: true,
                width: "100px"
            },
            {
                title: "CSEV",
                dataIndex: "csev",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "Qv",
                dataIndex: "qv",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "EA(kJ/mol)",
                dataIndex: "ea",
                align: "center",
                width: "5%",
                editable: true,
                width: "5%"
            },
            {
                title: "摩尔体积（cm3）",
                dataIndex: "molarVolume",
                align: "center",
                width: "5%",
                editable: true
            },
            {
                title: "操作",
               
                align: "center",
                dataIndex: "operation",
                render: (text, record) => {
                    const editable = this.isEditing(record);
                    return (
                        <div>
                            {editable ? (
                                <span>
                                    <EditableContext.Consumer>
                                        {form => (
                                            <a
                                                href="javascript:;"
                                                onClick={() =>
                                                    this.save(
                                                        form,
                                                        record.key,
                                                        record
                                                    )
                                                }
                                                style={{ marginRight: 8 }}
                                            >
                                                确定
                                            </a>
                                        )}
                                    </EditableContext.Consumer>

                                    <a onClick={() => this.save1()}>取消</a>
                                </span>
                            ) : (
                                <a onClick={() => this.edit(record.key)}>
                                    {" "}
                                    <MyIcon
                                        type="icon-gongneng"
                                        className={style.MyIcon_gongneng}
                                    />
                                </a>
                            )}
                        </div>
                    );
                }
            }
        ];
    }
    //取消事件
    cancel = () => {
        this.setState({ editingKey: "" });
    };

    isEditing = record => {
        return record.key === this.state.editingKey;
    };
    //编辑事件
    edit(key) {
        this.setState({ editingKey: key });
    }

    //取消事件

    save1() {
        this.setState({ editingKey: "" });
    }

    //确定事件
    save(form, key, record) {
        form.validateFields((error, row) => {
            if (error) {
                message.warning("请将参数配置完整!");
                return;
            }
            this.setState({ editingKey: "" });
            console.log(record, row);

            //     //编辑事件发出请求
            // let data = {
            //   dayValue:Number(row.dayValue),
            //   hourValue:Number(row.hourValue),
            //   typeName:row.typeName,
            //   unit:row.unit,
            //   id:record.id
            // }
            // console.log(data)
            // bgConEdit([{...data}]).then(data => {
            //   console.log(data)
            // })

            setTimeout(() => {
              let data = {
                contaminant:record.contaminant,
                id:record.id,
                num:record.num,
                alfa:Number(row.alfa),
                caa:Number(row.caa),
                ccr:Number(row.ccr),
                cma:Number(row.cma),
                csev:Number(row.csev),
                ea:Number(row.ea),
                ee:Number(row.ee),
                ehomo:Number(row.ehomo),
                elumo:Number(row.elumo),
                ht:Number(row.ht),
                miu:Number(row.miu),
                molarVolume:Number(row.molarVolume),
                mw:Number(row.mw),
                qc:Number(row.qc),
                qh:Number(row.qh),
                qv:Number(row.qv),
                targetControlValue:Number(row.targetControlValue),
                te:Number(row.te),
              }
              biaogeupdate({...data}).then(data => {
                console.log(data)
              })
            })

           

            const newData = [...this.state.data];
            const index = newData.findIndex(item => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row
                });
                this.setState({ data: newData, editingKey: "" });
            } else {
                newData.push(row);
                this.setState({ data: newData, editingKey: "" });
            }
        });
    }
    //数字输入康事件
    InputNumber = (value,v) => {
    
      this.setState({
        [value]:v
      })
    }
    //点击编辑事件
    editbutton = () => {
    
      this.setState({
        button:"完成",
        disa:!this.state.disa
      })
      setTimeout(() => {
        const {a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q} = this.state
        let data = {
          a:a,
          b:b,
          c:c,
          d:d,
          e:e,
          f:f,
          g:g,
          h:h,
          i:i,
          j:j,
          k:k,
          l:l,
          m:m,
          n:n,
          o:o,
          p:p,
          q:q,
          id:this.state.textId
        }
        update({...data}).then(data => {
          console.log(data)
          if(this.state.disa == true) {
            this.setState({
             
              button:"编辑"
            })
          }
        })
      })
     

    }
    //点击恢复事件
    pull = () => {
      restoreDefaults().then(data => {
        const {a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q} = this.state
        console.log(data.data)
        if(data.data.rc == 0) {
            const {a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q} = data.data.ret
            this.setState({
                a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q
              })
              setTimeout(() => {
                message.success('恢复默认成功!')
              },2000)
        }

      })
    }

    render() {
      const {a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q} = this.state
        const components = {
            body: {
                row: EditableFormRow,
                cell: EditableCell
            }
        };

        const columns = this.columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    inputType: col.dataIndex === "age" ? "number" : "text",
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: this.isEditing(record)
                })
            };
        });

        return (
            <div>
                <Card className={style.CardTop}>
                    <div className={style.Top}>
                        <span style={{fontSize:16,fontWeight:900}}>模型计算公式</span> :<span style={{marginLeft:3}}>InP<sub>L</sub></span>=<sup  style={{ fontFamily: "sx" }}>A</sup>/<sub>T</sub>－<span style = {{ fontFamily: "sx" }}>B</span>×α － <span style = {{ fontFamily: "sx" }}>C</span> × MW ＋ <span style = {{ fontFamily: "sx" }}>E</span> × CSEV ＋ <span>F</span> × CAA ＋ <span style = {{ fontFamily: "sx" }}>G</span>    
                        <span style={{marginLeft:50}}>InP<sub>s</sub></span> = <sup style={{ fontFamily: "sx" }}>H</sup>/<sub>T</sub> ＋ <span style={{ fontFamily: "sx" }}>J</span> × α － <span style={{ fontFamily: "sx" }}>H</span> × MW ＋ <span style={{ fontFamily: "sx" }}>L</span> × TE － <span>M</span> × CAA － <span style={{ fontFamily: "sx" }}>N</span> × △H<sub>f</sub> － <span style={{ fontFamily: "sx" }}>O</span> × E<sub>HOMO</sub> － <span>P</span> × μ － <span>Q</span>
                    </div>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>A </span>=
                        <InputNumber size="small"  value={a} onChange={this.InputNumber.bind(this,'a')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>B </span>=
                        <InputNumber size="small" value={b} onChange={this.InputNumber.bind(this,'b')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>C </span>=
                        <InputNumber size="small" value={c} onChange={this.InputNumber.bind(this,'c')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>D </span>=
                        <InputNumber size="small" value={d} onChange={this.InputNumber.bind(this,'d')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>E </span>=
                        <InputNumber size="small" value={e} onChange={this.InputNumber.bind(this,'e')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>F </span>=
                        <InputNumber size="small" value={f} onChange={this.InputNumber.bind(this,'f')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>G </span>=
                        <InputNumber size="small" value={g} onChange={this.InputNumber.bind(this,'g')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>H </span>=
                        <InputNumber size="small" value={h} onChange={this.InputNumber.bind(this,'h')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>I </span>=
                        <InputNumber size="small" value={i} onChange={this.InputNumber.bind(this,'i')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>J </span>=
                        <InputNumber size="small" value={j} onChange={this.InputNumber.bind(this,'j')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>K </span>=
                        <InputNumber size="small" value={k} onChange={this.InputNumber.bind(this,'k')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>L </span>=
                        <InputNumber size="small" value={l} onChange={this.InputNumber.bind(this,'l')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>M </span>=
                        <InputNumber size="small" value={m} onChange={this.InputNumber.bind(this,'m')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>N </span>=
                        <InputNumber size="small" value={n} onChange={this.InputNumber.bind(this,'n')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>O </span>=
                        <InputNumber size="small" value={o} onChange={this.InputNumber.bind(this,'o')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>P </span>=
                        <InputNumber size="small" value={p} onChange={this.InputNumber.bind(this,'p')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <span style={{ fontFamily: "sx" }}>Q </span>=
                        <InputNumber size="small" value={q} onChange={this.InputNumber.bind(this,'q')} disabled={this.state.disa}/>
                    </span>
                    <span className={style.spanTop}>
                        <Button
                            size="small"
                            type="primary"
                            onClick={this.editbutton}
                            style={{ marginRight: 3 }}
                        >
                            {this.state.button}
                        </Button>
                        <Button size="small"
                        onClick={this.pull}
                        >
                            恢复默认
                        </Button>
                    </span>
                </Card>
                <Card className={style.CardBottom}>
                    <div className={style.myTable}>
                        <Table
                            components={components}
                            bordered
                            scroll={{ x: 2600, y: 500 }}
                            
                            dataSource={PublicService.transformArrayData(
                                this.state.data,
                                true,
                                true
                            )}
                            columns={columns}
                            rowClassName="editable-row"
                            pagination={false}
                            size="small"
                            // style={{ width: "1800px" }}
                        />
                    </div>
                </Card>
            </div>
        );
    }
}

export default connect()(DataCon);
